<template>
  <div class="login">
    <div class="box">
      <div class="box-l">
        <h1 class="title">面试指南平台后台管理系统</h1>
        <p class="content">
          Welcome To Interview Guide platform System
        </p>
      </div>
      <div class="box-r">
        <div class="form">
          <input class="userName" type="text" placeholder="User Name" />
          <br />
          <input class="password" type="password" placeholder="Password" />
          <br />
          <button class="submitBtn" @click="login">Login</button>
          <br />
          <small class="forget">Forgot Password? </small>
          <br />
          <small class="signup"
            >Do not have an account? <span>Signup</span>
          </small>
        </div>
      </div>
    </div>
    <div class="footer">Created by <span>Liderder</span></div>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  background: url(http://demo.mxyhn.xyz:8020/cssthemes6/asdfsrfwewe/img/bg.jpeg);
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  .box {
    height: 550px;
    width: 1100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    box-sizing: border-box;
    .box-l {
      flex: 1;
      background-color: rgba(219, 101, 116, 0.95);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      .title {
        margin-left: 30px;
        font-size: 30px;
        font-weight: 500;
      }
      .content {
        margin-left: 30px;
        font-size: 16px;
      }
    }
    .box-r {
      flex: 1;
      background-color: rgba(46, 48, 53, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      .form {
        padding: 40px;
        input {
          height: 30px;
          width: 100%;
          border: none;
          border-bottom: 1px solid #444951;
          background: none;
          color: #8a8d93;
          font-size: 16px;
        }
        input::placeholder {
          color: #aaa;
        }
        .password {
          margin-top: 30px;
        }
        button {
          margin-top: 30px;
          height: 40px;
          width: 66px;
          background-color: #db5674;
          color: #fff;
          border: none;
          cursor: pointer;
          border-radius: 6px;
          font-size: 16px;
          &:hover {
            background-color: #d44658;
          }
          &:focus {
            box-shadow: 0 0 0 0.2rem rgb(219 101 116 / 50%);
          }
        }
        .forget {
          display: inline-block;
          margin-top: 30px;
          color: #db5674;
          font-size: 14.4px;
        }
        .signup {
          color: #fff;
          font-size: 12.8px;
          span {
            color: #db5674;
          }
        }
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    color: #fff;
    span {
      color: #db5674;
    }
  }
}
</style>